<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <div class="navbar">
      <div class="nav-content">
        <div class="logo">
          <span class="logo-icon">✈️</span>
          <span class="logo-text">旅游平台</span>
        </div>
        <div class="nav-menu">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="home">首页</el-menu-item>
            <el-menu-item index="attractions">景点</el-menu-item>
            <el-menu-item index="travel">旅行</el-menu-item>
            <el-menu-item index="chat">客服</el-menu-item>
            <el-menu-item index="qa">智能问答</el-menu-item>
            <el-menu-item index="coze">扣子AI</el-menu-item>
            <el-menu-item index="about">关于</el-menu-item>
          </el-menu>
        </div>
        <div class="nav-user">
          <!-- 通知中心 -->
          <NotificationCenter />
          
          <el-dropdown @command="handleUserCommand">
            <span class="user-info">
              <el-avatar :size="32" :src="userInfo?.avatar">
                {{ userInfo?.nickname?.[0] || 'U' }}
              </el-avatar>
              <span class="username">{{ userInfo?.nickname || '用户' }}</span>
              <el-icon><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                <el-dropdown-item command="orders">我的订单</el-dropdown-item>
                <el-dropdown-item command="favorites">我的收藏</el-dropdown-item>
                <el-dropdown-item command="chat">在线客服</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 为你推荐（个性化） -->
    <div class="recommended-section" v-if="hybridRecommendations.length > 0">
      <div class="section-title">
        <h2>为你推荐</h2>
        <p>基于你的历史行为智能推荐</p>
      </div>
      <div class="attractions-grid">
        <div
          v-for="attraction in hybridRecommendations"
          :key="`hybrid-${attraction.id || attraction.name || Math.random()}`"
          class="attraction-card"
          @click="handleAttractionClick(attraction.id)"
        >
          <div class="card-image">
            <img :src="attraction.cover_image || 'https://picsum.photos/300/200'" :alt="attraction.name" />
          </div>
          <div class="card-content">
            <h3 class="card-title">{{ attraction.name }}</h3>
            <div class="card-location">
              <el-icon><Location /></el-icon>
              <span>{{ attraction.city || attraction.province || '未知' }}</span>
            </div>
            <div class="card-footer">
              <div class="card-rating">
                <el-rate
                  v-model="attraction.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                />
                <span class="review-count">({{ attraction.review_count }})</span>
              </div>
              <div class="card-price">
                <span class="price" v-if="attraction.price > 0">
                  ¥{{ attraction.price }}
                </span>
                <span class="free" v-else>免费</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="banner-section" v-if="homeData.banners.length > 0">
      <el-carousel height="400px" :interval="5000" arrow="hover">
        <el-carousel-item v-for="banner in homeData.banners" :key="`banner-${banner.id || banner.title || Math.random()}`">
          <div
            class="banner-item"
            :style="{ backgroundImage: `url(${banner.image_url})` }"
            @click="handleBannerClick(banner)"
          >
            <div class="banner-overlay">
              <h2>{{ banner.title || '探索美丽世界' }}</h2>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 分类导航 -->
    <div class="category-section" v-if="homeData.categories.length > 0">
      <div class="section-title">
        <h2>热门分类</h2>
        <p>发现你感兴趣的旅游类型</p>
      </div>
      <div class="category-grid">
        <div
          v-for="category in homeData.categories"
          :key="`category-${category.id || category.name || Math.random()}`"
          class="category-item"
          @click="handleCategoryClick(category)"
        >
          <div class="category-icon">
            <span>{{ getCategoryIcon(category.icon) }}</span>
          </div>
          <div class="category-name">{{ category.name }}</div>
        </div>
      </div>
    </div>

    <!-- 推荐景点 -->
    <div class="recommended-section" v-if="homeData.recommended_attractions.length > 0">
      <div class="section-title">
        <h2>精品推荐</h2>
        <p>精心挑选的优质景点</p>
      </div>
      <div class="attractions-grid">
        <div
          v-for="attraction in homeData.recommended_attractions"
          :key="`attraction-${attraction.id || attraction.name || Math.random()}`"
          class="attraction-card"
          @click="handleAttractionClick(attraction.id)"
        >
          <div class="card-image">
            <img :src="attraction.cover_image || 'https://picsum.photos/300/200'" :alt="attraction.name" />
            <div class="card-badge" v-if="attraction.is_recommended">推荐</div>
          </div>
          <div class="card-content">
            <h3 class="card-title">{{ attraction.name }}</h3>
            <div class="card-location">
              <el-icon><Location /></el-icon>
              <span>{{ attraction.city || attraction.province || '未知' }}</span>
            </div>
            <div class="card-footer">
              <div class="card-rating">
                <el-rate
                  v-model="attraction.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                />
                <span class="review-count">({{ attraction.review_count }})</span>
              </div>
              <div class="card-price">
                <span class="price" v-if="attraction.price > 0">
                  ¥{{ attraction.price }}
                  <span class="original-price" v-if="attraction.original_price">
                    ¥{{ attraction.original_price }}
                  </span>
                </span>
                <span class="free" v-else>免费</span>
              </div>
            </div>
            <div class="card-actions" @click.stop>
              <el-button
                type="primary"
                size="small"
                :icon="ShoppingCart"
                @click="handleBookNow(attraction)"
              >
                立即预订
              </el-button>
              <el-button
                type="success"
                size="small"
                :icon="ChatRound"
                @click="handleContactMerchant(attraction)"
                style="margin-top: 8px;"
              >
                联系商家
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门景点 -->
    <div class="popular-section" v-if="homeData.popular_attractions.length > 0">
      <div class="section-title">
        <h2>热门景点</h2>
        <p>人气最高的旅游目的地</p>
      </div>
      <div class="attractions-grid">
        <div
          v-for="attraction in homeData.popular_attractions"
          :key="`popular-${attraction.id || attraction.name || Math.random()}`"
          class="attraction-card"
          @click="handleAttractionClick(attraction.id)"
        >
          <div class="card-image">
            <img :src="attraction.cover_image || 'https://picsum.photos/300/200'" :alt="attraction.name" />
          </div>
          <div class="card-content">
            <h3 class="card-title">{{ attraction.name }}</h3>
            <div class="card-location">
              <el-icon><Location /></el-icon>
              <span>{{ attraction.city || attraction.province || '未知' }}</span>
            </div>
            <div class="card-footer">
              <div class="card-rating">
                <el-rate
                  v-model="attraction.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                />
                <span class="review-count">({{ attraction.review_count }})</span>
              </div>
              <div class="card-price">
                <span class="price" v-if="attraction.price > 0">
                  ¥{{ attraction.price }}
                </span>
                <span class="free" v-else>免费</span>
              </div>
            </div>
            <div class="card-actions" @click.stop>
              <el-button
                type="primary"
                size="small"
                :icon="ShoppingCart"
                @click="handleBookNow(attraction)"
              >
                立即预订
              </el-button>
              <el-button
                type="success"
                size="small"
                :icon="ChatRound"
                @click="handleContactMerchant(attraction)"
                style="margin-top: 8px;"
              >
                联系商家
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单创建对话框 -->
    <el-dialog
      v-model="orderDialogVisible"
      title="创建订单"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="orderFormRef"
        :model="orderForm"
        :rules="orderRules"
        label-width="100px"
      >
        <el-form-item label="景点名称">
          <span style="color: #666;">{{ selectedAttraction?.name }}</span>
        </el-form-item>
        <el-form-item label="单价">
          <span style="color: #ff6b6b; font-weight: 600; font-size: 16px;">
            {{ selectedAttraction?.price > 0 ? `¥${selectedAttraction.price}` : '免费' }}
          </span>
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
          <el-input-number
            v-model="orderForm.quantity"
            :min="1"
            :max="10"
            :precision="0"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="总金额">
          <span :style="{ color: selectedAttraction?.price > 0 ? '#ff6b6b' : '#67c23a', fontWeight: 600, fontSize: '18px' }">
            {{ selectedAttraction?.price > 0 ? `¥${totalAmount}` : '免费' }}
          </span>
        </el-form-item>
        <el-form-item label="联系人" prop="contact_name">
          <el-input
            v-model="orderForm.contact_name"
            placeholder="请输入联系人姓名"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="contact_phone">
          <el-input
            v-model="orderForm.contact_phone"
            placeholder="请输入联系电话"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="orderForm.notes"
            type="textarea"
            :rows="3"
            placeholder="可选：请输入备注信息"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="orderDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="submitOrder"
          :loading="orderSubmitting"
        >
          确认下单
        </el-button>
      </template>
    </el-dialog>

    <!-- 页脚 -->
    <div class="footer">
      <p>© 2024 旅游平台. All rights reserved.</p>
    </div>

    <!-- 悬浮客服按钮 -->
    <div class="chat-float-button" @click="goToChat">
      <div class="float-icon">💬</div>
      <div class="float-text">在线客服</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown, Location, ShoppingCart, ChatRound } from '@element-plus/icons-vue'
import { travelAPI, chatAPI, recommendationAPI } from '../api/index.js'
import NotificationCenter from '../components/NotificationCenter.vue'

const router = useRouter()
const activeIndex = ref('home')

const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))

const homeData = reactive({
  banners: [],
  categories: [],
  recommended_attractions: [],
  popular_attractions: []
})

// 为你推荐（混合推荐）
const hybridRecommendations = ref([])

const getCategoryIcon = (icon) => {
  const iconMap = {
    'mountain': '⛰️',
    'temple': '🏛️',
    'theme-park': '🎢',
    'beach': '🏖️',
    'hot-spring': '♨️',
    'ancient-town': '🏘️',
    'mountain-range': '🗻',
    'ecology': '🌲'
  }
  return iconMap[icon] || '📍'
}

const loadHomeData = async () => {
  try {
    const response = await travelAPI.getHomePage()
    Object.assign(homeData, response)
  } catch (error) {
    console.error('加载首页数据失败:', error)
    ElMessage.error('加载数据失败，请稍后重试')
  }
}

const loadRecommendations = async () => {
  try {
    const token = localStorage.getItem('token')
    if (!token) return

    // 并行拉取三类推荐
    const [hybridRes, userRes, itemRes] = await Promise.all([
      recommendationAPI.hybrid(6, 0.6).catch(() => null),
      recommendationAPI.userBased(6).catch(() => null),
      recommendationAPI.itemBased(6).catch(() => null),
    ])

    // 为你推荐（混合）
    hybridRecommendations.value = hybridRes?.attractions || []

    // 用算法结果覆盖“精品推荐/热门景点”，确保来自推荐系统
    const userRecs = userRes?.attractions || []
    const itemRecs = itemRes?.attractions || []

    if (userRecs.length > 0) {
      homeData.recommended_attractions = userRecs
    }
    if (itemRecs.length > 0) {
      homeData.popular_attractions = itemRecs
    }
  } catch (error) {
    // 未产生推荐数据时不打扰用户，保留原有首页数据作为兜底
    console.warn('加载推荐失败或暂无推荐：', error?.response?.data || error?.message)
  }
}

const handleSelect = (key) => {
  if (key === 'chat') {
    router.push('/chat')
  } else if (key === 'qa') {
    router.push('/qa')
  } else if (key === 'coze') {
    router.push('/coze')
  } else {
    console.log('选中菜单:', key)
  }
}

const goToChat = () => {
  router.push('/chat')
}

const handleUserCommand = (command) => {
  if (command === 'logout') {
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    ElMessage.success('已退出登录')
    router.push('/login')
  } else if (command === 'profile') {
    router.push('/profile')
  } else if (command === 'orders') {
    router.push('/orders')
  } else if (command === 'chat') {
    router.push('/chat')
  } else if (command === 'favorites') {
    ElMessage.info('收藏功能开发中')
  } else {
    ElMessage.info(`功能开发中: ${command}`)
  }
}

const handleBannerClick = (banner) => {
  if (banner.link_type === 'attraction' && banner.link_id) {
    router.push(`/attractions/${banner.link_id}`)
  }
}

const handleCategoryClick = (category) => {
  // router.push(`/attractions?category=${category.id}`)
  ElMessage.info('分类筛选功能开发中')
}

const handleAttractionClick = (id) => {
  // 埋点：点击行为
  try {
    travelAPI.collectBehavior({ attractionId: id, behaviorType: 'click' }).catch(() => {})
  } catch (e) {}
  router.push(`/attractions/${id}`)
}

// 订单相关状态
const orderDialogVisible = ref(false)
const selectedAttraction = ref(null)
const orderFormRef = ref(null)
const orderSubmitting = ref(false)
const orderForm = reactive({
  quantity: 1,
  contact_name: '',
  contact_phone: '',
  notes: ''
})

// 订单表单验证规则
const orderRules = {
  quantity: [
    { required: true, message: '请输入数量', trigger: 'blur' },
    { type: 'number', min: 1, max: 10, message: '数量必须在1-10之间', trigger: 'change' }
  ],
  contact_name: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
    { min: 2, max: 50, message: '姓名长度在2-50个字符之间', trigger: 'blur' }
  ],
  contact_phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
}

// 计算总金额
const totalAmount = computed(() => {
  if (!selectedAttraction.value) return '0.00'
  const price = selectedAttraction.value.price || 0
  const quantity = orderForm.quantity || 1
  return (price * quantity).toFixed(2)
})

// 处理立即预订
const handleBookNow = (attraction) => {
  // 检查是否登录
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  selectedAttraction.value = attraction
  // 重置表单
  orderForm.quantity = 1
  orderForm.contact_name = userInfo.value?.nickname || ''
  orderForm.contact_phone = userInfo.value?.phone || ''
  orderForm.notes = ''
  orderDialogVisible.value = true
}

// 联系商家
const handleContactMerchant = async (attraction) => {
  // 检查是否登录
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  if (!attraction || !attraction.id) {
    ElMessage.error('景点信息无效')
    return
  }

  try {
    // 创建或获取商户聊天房间
    const response = await chatAPI.createMerchantRoom({
      attraction_id: attraction.id
    })
    
    if (response && response.room_id) {
      // 跳转到聊天页面，并传递房间信息
      router.push({
        path: '/chat',
        query: {
          room_id: response.room_id,
          room_type: 'merchant',
          attraction_id: attraction.id
        }
      })
    } else {
      ElMessage.error('创建聊天房间失败')
    }
  } catch (error) {
    console.error('联系商家失败:', error)
    const errorMsg = error.response?.data?.detail || '联系商家失败，该景点暂无商家'
    ElMessage.error(errorMsg)
  }
}

// 提交订单
const submitOrder = async () => {
  if (!orderFormRef.value) return

  try {
    await orderFormRef.value.validate()
  } catch (error) {
    return
  }

  orderSubmitting.value = true

  try {
    // 确保数量是整数且有效
    const quantity = Math.max(1, Math.min(10, Number.parseInt(orderForm.quantity) || 1))
    
    // 确保必填字段不为空
    const contactName = orderForm.contact_name.trim()
    const contactPhone = orderForm.contact_phone.trim()
    
    if (!contactName) {
      ElMessage.error('请输入联系人姓名')
      orderSubmitting.value = false
      return
    }
    
    if (!contactPhone) {
      ElMessage.error('请输入联系电话')
      orderSubmitting.value = false
      return
    }
    
    const orderData = {
      attraction_id: Number.parseInt(selectedAttraction.value.id),
      quantity: quantity,
      contact_name: contactName,
      contact_phone: contactPhone,
      notes: orderForm.notes?.trim() || null
    }

    console.log('提交订单数据:', orderData)
    const response = await travelAPI.createOrder(orderData)
    
    ElMessage.success('订单创建成功！')
    orderDialogVisible.value = false
    
    // 询问是否跳转到订单详情
    ElMessageBox.confirm(
      '订单创建成功，是否前往订单详情页？',
      '提示',
      {
        confirmButtonText: '前往订单详情',
        cancelButtonText: '稍后查看',
        type: 'success'
      }
    ).then(() => {
      // 确保response有id字段
      if (response && response.id) {
        router.push(`/orders/${response.id}`)
      } else {
        console.error('订单响应数据格式异常:', response)
        router.push('/orders')
      }
    }).catch(() => {
      // 用户选择稍后查看，不做任何操作
    })
  } catch (error) {
    console.error('创建订单失败:', error)
    // 处理422验证错误，显示详细的字段错误信息
    let errorMessage = '创建订单失败，请稍后重试'
    
    if (error.response?.status === 422) {
      // FastAPI返回的422错误通常包含详细的验证错误
      const errorData = error.response?.data
      if (errorData) {
        if (Array.isArray(errorData.detail)) {
          // Pydantic验证错误格式：[{"loc": ["body", "contact_name"], "msg": "field required", ...}]
          try {
            const errors = errorData.detail.map(err => {
              const loc = err.loc || []
              const field = (Array.isArray(loc) && loc.length > 0) ? loc[loc.length - 1] : '未知字段'
              const msg = err.msg || '验证失败'
              return `${String(field)}: ${String(msg)}`
            }).join('; ')
            errorMessage = `数据验证失败: ${errors}`
          } catch (parseError) {
            console.error('解析错误详情失败:', parseError)
            errorMessage = `数据验证失败: ${JSON.stringify(errorData.detail)}`
          }
        } else if (errorData.detail) {
          errorMessage = errorData.detail
        }
      }
    } else {
      // 其他错误
      errorMessage = error.response?.data?.detail || 
                    error.response?.detail || 
                    error.data?.detail || 
                    error.message || 
                    errorMessage
    }
    
    ElMessage.error(errorMessage)
  } finally {
    orderSubmitting.value = false
  }
}

onMounted(() => {
  loadHomeData()
  loadRecommendations()
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: #f5f5f5;
}

/* 导航栏 */
.navbar {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  color: #409eff;
}

.logo-icon {
  font-size: 24px;
}

.nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 20px;
  transition: background 0.3s;
}

.user-info:hover {
  background: #f5f5f5;
}

.username {
  font-size: 14px;
  color: #333;
}

/* 轮播图 */
.banner-section {
  margin-bottom: 40px;
}

.banner-item {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
  cursor: pointer;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 40px;
  color: white;
}

.banner-overlay h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0;
}

/* 分类导航 */
.category-section,
.recommended-section,
.popular-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  margin-bottom: 30px;
}

.section-title h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 8px;
}

.section-title p {
  color: #666;
  font-size: 14px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
}

.category-item {
  background: white;
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.category-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.category-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.category-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 景点卡片 */
.attractions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.attraction-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.attraction-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.attraction-card:hover .card-image img {
  transform: scale(1.05);
}

.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ff6b6b;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 18px;
  color: #333;
  margin: 0 0 12px 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-location {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card-actions {
  padding: 0 16px 16px;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
  margin-top: 12px;
}

.card-actions .el-button {
  width: 100%;
}

.card-actions .el-button + .el-button {
  margin-top: 8px;
}

.card-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-count {
  font-size: 12px;
  color: #999;
}

.card-price {
  font-size: 18px;
  font-weight: 600;
  color: #ff6b6b;
}

.price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  font-weight: normal;
}

.free {
  color: #67c23a;
}

/* 页脚 */
.footer {
  background: #2c3e50;
  color: white;
  text-align: center;
  padding: 30px;
  margin-top: 60px;
}

.footer p {
  margin: 0;
  font-size: 14px;
}

/* 悬浮客服按钮 */
.chat-float-button {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  transition: all 0.3s;
  z-index: 999;
}

.chat-float-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.6);
}

.chat-float-button:active {
  transform: scale(0.95);
}

.float-icon {
  font-size: 24px;
  margin-bottom: 2px;
}

.float-text {
  font-size: 10px;
  color: white;
  font-weight: 500;
  white-space: nowrap;
}
</style>

